<template>
  <div class="HelloWorld-container" ref="mapContainter">
    <div id="map"></div>
  </div>
</template>

<script>
let map = '';
let mapLayer = '';
export default {
  name: 'HelloWorld',
  data() {
    return {
      imgSize: 500, // 地图图片宽高
      map_image_url: 'https://cftm.coreframe.com.cn/wx29b378fdd1ee63fe/SN-202101159893/地图A30C',
      markerList: [
        {
          attractions_id: 22,
          attractions_name: '大岭山森林公园',
          image_url: 'https://cftm.coreframe.com.cn/wx29b378fdd1ee63fe/SN-202101159893/图标(景点）260B',
          integral_flag: 0,
          order_no: 0,
          route_id: 1,
          xaxis: '-332.8706108882752',
          yaxis: '124.34712447637513',
        },
        {
          attractions_id: 80,
          attractions_name: '大沙西门楼',
          image_url: 'https://cftm.coreframe.com.cn/wx29b378fdd1ee63fe/SN-202101159893/图标(红色资源）436B',
          integral_flag: 0,
          order_no: 0,
          route_id: 1,
          xaxis: '-169.12226368222545',
          yaxis: '224.37382185395555',
        },
      ],
      attractions_id: 0,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      map = L.map('map', {
        center: [-this.imgSize / 2, this.imgSize / 2], // 地图中心
        zoom: 2, // 缩放比例
        minZoom: 1,
        maxZoom: 10,
        crs: L.CRS.Simple,
        doubleClickZoom: false, // 禁用双击放大
        zoomControl: false, // 移除放大缩小按钮
        attributionControl: false, // 移除右下角leaflet标识
        zoomSnap: 0.1,
      });
      this.addMapImg();
      this.addMapMarker(true);
    },
    // 添加地图图片
    addMapImg() {
      const southWest = map.unproject([0, this.imgSize], map.getMinZoom() - 1),
        northEast = map.unproject([this.imgSize, 0], map.getMinZoom() - 1);
      const bounds = new L.LatLngBounds(southWest, northEast);
      L.imageOverlay(this.map_image_url, bounds).addTo(map);
      map.setMaxBounds(bounds);
    },
    // 添加地图标记
    addMapMarker(keyframesFlag = false) {
      if (mapLayer) {
        // 删除layer图层
        map.removeLayer(mapLayer);
      }
      mapLayer = new L.layerGroup(); // 新增layer图层

      let keyframes = '';
      if (keyframesFlag) {
        keyframes = 'keyframes';
      }

      this.markerList.forEach((item, index) => {
        // 图标
        let iconSize = [30, 30];
        let iconAnchor = [15, 30];
        let zIndexOffset = 0;
        if (this.attractions_id == item.attractions_id) {
          iconSize = [40, 40];
          iconAnchor = [20, 40];
          zIndexOffset = 1000;
        }
        const icon = L.icon({
          iconUrl: item.image_url,
          className: keyframes,
          iconSize,
          iconAnchor,
        });
        const iconOptions = {
          icon: icon,
          zIndexOffset,
        };
        let iconFlag = true; // 调试时，点一次会触发两次，而真机则不会，避免点击一次会触发两次
        L.marker([item.xaxis, item.yaxis], iconOptions)
          .addTo(mapLayer)
          .on('click', () => {
            if (!iconFlag) return;
            iconFlag = false;
            setTimeout(() => {
              iconFlag = true;
            }, 100);
            console.log('点击89');
            // this.getAttrDetail(item.attractions_id);
          });

        // 文字
        let name = item.attractions_name;
        let len = name.length || 0;
        name = name.substr(0, 7);
        if (len <= 3) len = 3;
        else if (len >= 7) len = 7;

        const text = L.divIcon({
          html: name,
          className: `div-icon ${item.integral_flag ? 'cl-red' : ''} ${keyframes} w${len}`,
          iconSize: [100, 18],
          iconAnchor: [50, 0],
        });
        const textOptions = {
          icon: text,
          zIndexOffset,
        };
        let textFlag = true;
        L.marker([item.xaxis, item.yaxis], textOptions)
          .addTo(mapLayer)
          .on('click', () => {
            if (!textFlag) return;
            textFlag = false;
            setTimeout(() => {
              textFlag = true;
            }, 100);
            console.log('点击119');
            // this.getAttrDetail(item.attractions_id);
          });
      });

      mapLayer.addTo(map);
    },
  },
};
</script>

<style lang="scss" scoped>
.HelloWorld-container {
  width: 100%;
  height: 100vh;
}
.cl-red {
  color: red;
}
</style>
